<template>
    <div class="wrapper">
        <h1>The Hot Hot</h1> 
        <div class="search">
          <el-input placeholder="请输入内容" size="small" v-model="search" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>     
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return{
            search:""
        }
    },
}
</script>




<style lang="scss" scoped>
    .wrapper{
        margin-top: 30px;
        width: 90%;
        h1{
            text-align: center;
        }
        .search{
            margin-top: 5px;
            float: right;
            width: 300px;
        }
        ul{
            margin:70px auto;
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            li{
                margin: 10px auto;
                height: 370px;
                width: 260px;
                background: orangered;
            }
            
        }
    }
</style>